【CSS】visibility - 可視・不可視

CSSのvisibilityプロパティについて解説します。

検証環境

CSS

macOS

14.1

visibility

visibilityは“可視・不可視”のプロパティです。

不可視に設定した場合、要素のビジュアルは見えなくなりますが、領域は確保されます。

基本構文

visibility: 値;

値

代表的な値は次の通りです。

値	意味
visible	可視化
hidden	不可視化

サンプル

visible

sample.html

<style>
span {
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
.target {
    ___ih_hl_start
    visibility: visible;
    ___ih_hl_end
}
</style>

<div>
    <span>HTML</span>
    <span class="target">CSS</span>
    <span>JavaScript</span>
</div>

プレビュー

hidden

sample.html

<style>
span {
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
.target {
    ___ih_hl_start
    visibility: hidden;
    ___ih_hl_end
}
</style>

<div>
    <span>HTML</span>
    <span class="target">CSS</span>
    <span>JavaScript</span>
</div>

プレビュー